<template>
	<view class="content _fade"
		:style="{background: `radial-gradient(70% 50% at 30% 6%, ${lightColor} 5%, rgba(255, 255, 255, 0) 100%)`}"
	>
		<view class="background"
			:style="{background: `radial-gradient(100% 100% at 80% 6%, ${lightColor1} 0%, rgba(255, 255, 255, 0) 100%)`}"
		>
			<customHead
				@scrollChange="scrollChange" 
				title="个人中心"
				titlePaddingLeft="30"
			>
			</customHead>
			<scroll-view
				scroll-y="true"
				class="scroll"
				:style="{paddingTop: `${naviHeight}px`}"
				:refresher-triggered="refresher_show"
				@refresherrefresh="refresherrefresh"
				:refresher-enabled="true"
			>
				<view v-if="naviHeight">
					<view>
						<userHead inputBorderColor="#747483" loginRul="/subpack_login/login/login"></userHead>
						<view class="balance">
							<view class="item backg1 _clickActive" @click="gotoRedpack">
								<view class="left">
									<text class="num">0</text>
									<text class="desc">红包</text>
								</view>
								<view class="right">
									<image src="../../static/images/myCenter/hongbao.png" mode="aspectFill"></image>
								</view>
							</view>
							<view class="item backg2 _clickActive" @click="gotoCoupon">
								<view class="left">
									<text class="num">{{couponNum}}</text>
									<text class="desc">优惠券</text>
								</view>
								<view class="right">
									<image src="../../static/images/myCenter/youhuiquan.png" mode="aspectFill"></image>
								</view>
							</view>
							<view class="item backg3 _clickActive" @click="gotoBalance">
								<view class="left">
									<text class="num">{{userInfo.balance}}</text>
									<text class="desc">余额</text>
								</view>
								<view class="right">
									<image src="../../static/images/myCenter/yue.png" mode="aspectFill"></image>
								</view>
							</view>
							<view class="item backg4 _clickActive" @click="gotoIntegral">
								<view class="left">
									<text class="num">{{userInfo.integral}}</text>
									<text class="desc">积分</text>
								</view>
								<view class="right">
									<image src="../../static/images/myCenter/jifen.png" mode="aspectFill"></image>
								</view>
							</view>
						</view>
						<view class="orderRecord">
							<view class="order_entire" @click="gotoEntireOrder('-1')">
								<view class="order_left">我的订单</view>
								<view class="order_right">
									<view class="all">全部</view>
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
							<view class="order_item">
								<view class="list" @click="gotoOrder(item)" v-for="(item, index) in orderRecord" :key="index">
									<image :src="item.image" mode="" style="width: 50rpx;height: 50rpx;"></image>
									<view class="title">{{ item.name }}</view>
								</view>
							</view>
						</view>
						
						<view class="menue_box">
							<view class="menu_item"  @click="gotoPath(item)" v-for="(item, index) in menuList" :key="index">
								
								<view class="menu_item_btn" v-if="item.goto === 'contactService'">
									<button open-type="contact" class="contact_btn">
										<image class="image" :src="item.img" mode="aspectFill"></image>
										<view class="title">{{ item.title }}</view>
									</button>
								</view>
								
								<view class="menu_item_normal" v-else>
									<image class="image" :src="item.img" mode="aspectFill"></image>
									<view class="title">{{ item.title }}</view>
								</view>
							</view>
							
						</view>
					</view>
					<view class="power_by" @click="gotoAbout">
						<!-- <view class="power_top">
							<view>大川长风</view>
							<view>提供技术与平台服务</view>
						</view>
						<text :decode="true">\t&emsp;v1.0.20</text> -->
						<about></about>
					</view>
				</view>
				<view class="" style="height: 188rpx;"></view>
			</scroll-view>
		</view>
		<salesman-popup :show="salesman_show" :image="poster_image" @close="salesman_show = false"></salesman-popup>
		<tabbar :current="4" :cart="totalCartNum"></tabbar>
	</view>
</template>

<script>
	import { searchPlugsCouponsByUserId } from '@/tools/request/api.js'
	import { makeContrast, makeLightColor } from '@/tools/utils/colorful.js'
	import { mapState, mapActions, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				refresher_show: false,
				salesman_show: false,
				menuList: [
					{
						title: '我的发票',
						img: '../../static/images/myCenter/bukuandan.png',
						goto: 'invoice',
					}, 
					{
						title: '我的店铺',
						img: '../../static/images/myCenter/dianpu.png',
						goto: 'myStore',
					}, 
					{
						title: '检疫证明',
						img: '../../static/images/myCenter/hege.png',
						goto: 'checkDisease',
					}, 
					{
						title: '联系销售', 
						img: '../../static/images/myCenter/xiaoshou.png',
						goto: 'contactSalesman',
					}, 
					{
						title: '消息推送',
						img: '../../static/images/myCenter/tuisong.png',
						goto: 'newsFeed',
					}, 
					{
						title: '联系客服',
						img: '../../static/images/myCenter/kefu.png',
						goto: 'contactService',
					}, 
					{
						title: '帮助说明',
						img: '../../static/images/myCenter/shuoming.png',
						goto: 'helpDesc',
					}, 
					{
						title: '设置',
						img: '../../static/images/myCenter/shezhi.png',
						goto: 'setting',
					}, 
				],
				orderRecord: [
					{
						name: '待支付',
						icon: 'pushpin',
						image: '../../static/images/myCenter/unPay.png',
						path: '/pages/order/order',
						status: 0
					},
					{
						name: '待收货',
						icon: 'map',
						image: '../../static/images/myCenter/paid.png',
						path: '/pages/order/order',
						status: 3
					},
					{
						name: '已完成',
						icon: 'edit-pen',
						image: '../../static/images/myCenter/finish.png',
						path: '/pages/order/order',
						status: 5
					},
					{
						name: '退款/售后',
						icon: 'edit-pen',
						image: '../../static/images/myCenter/afterSale.png',
						path: '/pages/order/afterSale/afterSale',
						status: 8
					},
				],
				couponNum: 0
			}
		},
		onLoad() {
			this.IS_APP_DONE((res) => { //登陆完成会调用
				this.getMycouponList(0);
				this.getUserInfo();
			});
		},
		onShow() {
			uni.hideTabBar();
		},
		computed: {
			lightColor () {
				let light_color = makeLightColor(this._temp_themeColor, 0.7);
				return light_color;
			},
			lightColor1 () {
				let light_color = makeLightColor(this._temp_themeColor, 0.9);
				return light_color;
			}
		},
		methods: {
			...mapMutations('app_store', ['IS_APP_DONE']),
			gotoAddStore () {
				uni.navigateTo({
					url: '/subpack_my/myStore/myStore'
				})
			},
			gotoAbout () {
				uni.navigateTo({
					url: '/pages/about'
				})
			},
			gotoRedpack () {
				if (!this.currentFirm.id) return this.gotoAddStore();
				uni.navigateTo({
					url: '/subpack_my/myRedpack/myRedpack'
				})
			},
			gotoCoupon () {
				if (!this.currentFirm.id) return this.gotoAddStore();
				uni.navigateTo({
					url: '/subpack_my/coupon/myCoupon/myCoupon'
				})
			},
			gotoBalance () {
				if (!this.currentFirm.id) return this.gotoAddStore();
				uni.navigateTo({
					url: '/subpack_my/balance/balance'
				})
			},
			gotoIntegral () {
				if (!this.currentFirm.id) return this.gotoAddStore();
				uni.navigateTo({
					url: '/subpack_my/integral/integral'
				})
			},
			gotoOrder (item) {
				if (!this.currentFirm.id) return this.gotoAddStore();
				uni.navigateTo({
					url: `${item.path}?id=${item.status}`
				})
			},
			gotoEntireOrder (id) {
				if (!this.currentFirm.id) return this.gotoAddStore();
				uni.navigateTo({
					url: `/pages/order/order?id=${id}`
				})
			},
			gotoPath(item) {
				switch (item.goto) {
					case 'invoice':
					if (!this.currentFirm.id) return this.gotoAddStore();
					uni.navigateTo({
						url: '/subpack_my/invoice/invoice'
					});
					break;
					case 'myStore':
					uni.navigateTo({
						url: '/subpack_my/myStore/myStore'
					})
					break;
					case 'checkDisease':
					uni.navigateTo({
						url: '/subpack_my/checkDisease/checkDisease'
					})
					break;
					case 'contactSalesman':
					this.salesman_show = true;
					break;
					case 'newsFeed':
					this.getNotification();
					break;
					case 'contactService':
				
					break;
					case 'helpDesc':
					uni.navigateTo({
						url: '/subpack_my/helpDesc/helpDesc'
					})
					break;
					case 'setting':
					uni.navigateTo({
						url: '/subpack_my/setting/setting'
					})
					break;
				}
			},
			// 订阅消息
			getNotification () {
				uni.requestSubscribeMessage({
					tmplIds: [''],
					success: (res) => {
					},
					fail: (err) => {
					},
					complete: () => {}
				});
			},
			// 获取优惠券列表
			getMycouponList(status) {
				this.loading_show = true;
				let postdata = {
					businessId: this.businessId,
					status: status
				}
				searchPlugsCouponsByUserId(postdata).then((res) => {
					this.refresher_show = false;
					this.loading_show = false;
					if (res.code == 200) {
						this.couponNum = res.body.total;
					} else {
						uni.$showMsg(res.msg)
					}
				});
			},
			// 下拉刷新
			refresherrefresh () {
				this.refresher_show = true;
				this.getMycouponList(0);
				this.getUserInfo();
			},
		},
		onShareAppMessage() {
			return {
				// title: '自定义标题',//自定义标题, 默认值小程序名称（当前小程序名称）
				path: '/pages/index/index',
				imageUrl: this.businessInfo.businessLogo,
			}
		},
	}
</script>

<style lang="less">
	@keyframes backAnimation {
		0%{
			background-position: 0% 0%;
			background-size: 100% 100%;
		}25%{
			background-position: 25% 25%;
			background-size: 130% 130%;
		}50%{
			background-position: 50% 50%;
			background-size: 140% 150%;
		}75%{
			background-position: 75% 75%;
			background-size: 150% 100%;
		}100%{
			background-position: 100% 100%;
			background-size: 150% 170%;
		}
	}
	.content{
		box-sizing: border-box;
		width: 100vw;
		overflow: hidden;
		// background: radial-gradient(70% 50% at 30% 6%, #bbf3ea 5%, rgba(255, 255, 255, 0) 100%);
		background-size: 100% 100%;
		
		.scroll{
			height: 100vh;
			box-sizing: border-box;
		}
		
		.background{
			width: 100vw;
			padding: 0 30rpx;
			box-sizing: border-box;
			overflow: hidden;
			// background: radial-gradient(100% 100% at 80% 6%, #e3f8d5 0%, rgba(255, 255, 255, 0) 100%);
			background-size: 100% 100%;
			
			
			.balance{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				
				.item{
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					align-items: center;
					flex: 0 0 49%;
					margin: 6rpx 0;
					border-radius: 20rpx;
					padding: 10rpx 20rpx;
					
					.left{
						display: flex;
						flex-direction: column;
						align-items: center;
						color: #FF1E1E;
						
						.num{
							font-weight: bold;
						}
						.desc{
							
						}
					}
					.right{
						
						image{
							width: 100rpx;
							height: 100rpx;
						}
					}
				}
				.backg1{
					background-color: #FFF6F6;
				}
				.backg2{
					background-color: #FFF3EF;
				}
				.backg3{
					background-color: #EFFBF6;
				}
				.backg4{
					background-color: #FFFBEF;
				}
			}
			
			
			.orderRecord{
				padding: 20rpx 0 40rpx 0;
				border-radius: 14rpx;
				margin-top: 30rpx;
				display: flex;
				flex-direction: column;
				// background-image: linear-gradient(to right, #fff, #fff);
				background-image: linear-gradient(to right, rgba(255,255,255,0.6), rgba(255,255,255,0.6));
				background-color: transparent;
				backdrop-filter: blur(3px);//毛玻璃属性
				
				.order_entire{
					display: flex;
					justify-content: space-between;
					padding-left: 40rpx;
					padding-right: 20rpx;
					margin-bottom: 30rpx;
					box-sizing: border-box;
					font-size: 26rpx;
					color: #666666;
					
					.order_right{
						display: flex;
						
						.all{
							display: flex;
							align-items: center;
							margin-right: 10rpx;
							font-size: 26rpx;
							color: #666666;
						}
					}
				}
				.order_entire:active{
					opacity: 0.6;
				}
				
				.order_item{
					display: flex;
					
					.list{
						display: flex;
						flex: 0 0 25%;
						flex-direction: column;
						align-items: center;
						font-size: 26rpx;
						color: #36363d;
						
						.title{
							margin-top: 10rpx;
						}
					}
					.list:active{
						opacity: 0.6;
					}
				}
			}
			
			.menue_box{
				margin-top: 30rpx;
				border-radius: 14rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				background-image: linear-gradient(to right, rgba(255,255,255,0.6), rgba(255,255,255,0.6));
				background-color: transparent;
				backdrop-filter: blur(3px);//毛玻璃属性
				
				.menu_item{
					display: flex;
					flex-direction: column;
					flex: 0 0 24%;
					justify-content: space-between;
					align-items: center;
					padding: 36rpx 0;
					
					.menu_item_btn{
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						
						.contact_btn{
							width: 100%;
							height: 100%;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							background: none;
							padding: 0;
							
							.image{
								width: 60rpx;
								height: 60rpx;
							}
							.title{
								font-size: 26rpx;
								color: #36363d;
								padding: 10rpx 0;
								display: flex;
								align-items: center;
								height: 34rpx;
								line-height: 34rpx;
							}
						}
						.contact_btn::after{
							border: none;
						}
					}
					
					.menu_item_normal{
						display: flex;
						flex-direction: column;
						align-items: center;
						
						.image{
							width: 60rpx;
							height: 60rpx;
						}
						.title{
							font-size: 26rpx;
							color: #36363d;
							padding: 10rpx 0;
						}
					}
				}
				.menu_item:active{
					opacity: 0.6;
				}
			}
			
			.swiper_box{
				width: 100%;
				margin-top: 30rpx;
				
				.swiper{
					width: 100%;
					height: 120rpx;
					
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			
			.power_by {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				color: gray;
				font-size: 26rpx;
				margin-top: 80rpx;
				margin-bottom: 30rpx;
				
				.power_top{
					display: flex;
					flex-direction: column;
				}
			}
		
			
		}
		
	}
    
</style>